import React, { Component } from 'react'

export default class App extends Component {


    state = {
        imgSrc: ''
    }

    getFile = (e) => {

        // 要想显示选择的图片，1.转 base64,2.创建临时的 URL
        // console.log(e.target.files);

        // 创建临时的 URL
        // this.setState({
        //     imgSrc: URL.createObjectURL(e.target.files[0])
        // })

        // 转 base64
        // 创建文件加载器
        const reader = new FileReader()

        // 读取文件
        reader.readAsDataURL(e.target.files[0])

        // 文件读取完成之后的回调函数
        reader.onload = () => {
            this.setState({
                imgSrc: reader.result
            })
        }
    }

    // 1. 将文件发送给保存图片的服务器
    // 2. 拿到服务器返回的图片地址
    // 3. 将图片地址保存在自己的服务器中

    render() {
        return (
            <div>

                <input type="file" onChange={this.getFile} />

                <button>点击按钮选择文件</button>

                <br />

                <img src={this.state.imgSrc} alt="" />

            </div>
        )
    }
}
